Skip to content

[TF-4678][Part 2] Sidebar section header and navigation controls - #91

Merged
hoangdat merged 4 commits into
masterfrom
feature/tf-4678-sidebar-navigation-components
Aug 17, 2026
Merged

hoangdat merged 4 commits into
masterfrom
feature/tf-4678-sidebar-navigation-components

Conversation

@dab246

@dab246 dab246 commented Aug 11, 2026 •

Copy link
Copy Markdown
Member

Issue

Related to #4678.

Branch: feature/tf-4678-sidebar-navigation-components → base feature/tf-4678-sidebar-tree-list

Section grouping and the navigation control primitives.

  • LinagoraSidebarSectionHeader
  • LinagoraSidebarControl
  • LinagoraSidebarButtonStyles — primary sidebar action button style
  • LinagoraButtonVariant.text (renders a TextButton, exhaustive switches over the enum need a new branch)

Dependencies

Demo

Screen.Recording.2026-08-11.at.10.43.59.mov

@dab246
dab246 force-pushed the feature/tf-4678-sidebar-navigation-components branch from 06db6b2 to 478ac08 Compare August 14, 2026 01:39
@dab246 dab246 changed the title [TF-4678] Add Sidebar Section Header and Primary Action Button Style [TF-4678][Part 2] Sidebar section header and navigation controls Aug 14, 2026

@tddang-linagora tddang-linagora left a comment •

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Design's icons are 16px square with no space in-between, app's are 24px with 8px in-between
Type Demo
Design Image
App Image

@tddang-linagora
tddang-linagora self-requested a review August 17, 2026 03:06
Base automatically changed from feature/tf-4678-sidebar-tree-list to master August 17, 2026 04:22
@hoangdat

Copy link
Copy Markdown
Member

please rebase

@dab246
dab246 force-pushed the feature/tf-4678-sidebar-navigation-components branch from 478ac08 to a761374 Compare August 17, 2026 04:33
@dab246

dab246 commented Aug 17, 2026 •

Copy link
Copy Markdown
Member Author
  • Design's icons are 16px square with no space in-between, app's are 24px with 8px in-between

Fixed

Screenshot 2026-08-17 at 11 33 01

@dab246

dab246 commented Aug 17, 2026

Copy link
Copy Markdown
Member Author

please rebase

Done

Comment thread lib/sidebar/linagora_sidebar_section_header.dart Outdated
Comment thread lib/sidebar/linagora_sidebar_section_header.dart
@hoangdat

hoangdat commented Aug 17, 2026 •

Copy link
Copy Markdown
Member

Dark-mode Compose button borrowed Material's default hover/press tint (onPrimary) instead of our own foreground — fixed + pinned with a test:

// lib/sidebar/linagora_sidebar_button_styles.dart
overlayColor: WidgetStateProperty.resolveWith((states) {
  if (states.contains(WidgetState.pressed)) {
    return foreground.withValues(alpha: _pressedOverlayOpacity);
  }
  if (states.contains(WidgetState.hovered)) {
    return foreground.withValues(alpha: _hoverOverlayOpacity);
  }
  if (states.contains(WidgetState.focused)) {
    return foreground.withValues(alpha: _pressedOverlayOpacity);
  }
  return null;
}),
// test/sidebar/linagora_sidebar_button_styles_test.dart
expect(
  style.overlayColor?.resolve({WidgetState.hovered}),
  foreground.withValues(alpha: 0.08),
  reason: 'hovered, $brightness',
);

@dab246

dab246 commented Aug 17, 2026

Copy link
Copy Markdown
Member Author

Dark-mode Compose button borrowed Material's default hover/press tint (onPrimary) instead of our own foreground — fixed + pinned with a test:

// lib/sidebar/linagora_sidebar_button_styles.dart
overlayColor: WidgetStateProperty.resolveWith((states) {
  if (states.contains(WidgetState.pressed)) {
    return foreground.withValues(alpha: _pressedOverlayOpacity);
  }
  if (states.contains(WidgetState.hovered)) {
    return foreground.withValues(alpha: _hoverOverlayOpacity);
  }
  if (states.contains(WidgetState.focused)) {
    return foreground.withValues(alpha: _pressedOverlayOpacity);
  }
  return null;
}),
// test/sidebar/linagora_sidebar_button_styles_test.dart
expect(
  style.overlayColor?.resolve({WidgetState.hovered}),
  foreground.withValues(alpha: 0.08),
  reason: 'hovered, $brightness',
);

Fixed. The hover, pressed, and focused overlays now derive from the button’s resolved foreground instead of Material’s default onPrimary tint. I also added coverage for light and dark themes, including hover, pressed, focused, and disabled states.

@dab246
dab246 requested a review from hoangdat August 17, 2026 06:45
@hoangdat
hoangdat merged commit 54f9072 into master Aug 17, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants